<template>
  <div class="app">
    <div
      class="DOM"
      :style="{
        height: styleData.height,
        line_height: styleData.height
    }"
    >
      <div class="poab">
        <div
          class="title"
          :style="{width:styleData.width,height: styleData.height ,line_height: styleData.height }"
        >
          <slot name="title"></slot>
        </div>
        <div class="box1" :style="{ left:styleData.width}">
          <slot name="box1"></slot>
        </div>
        <div class="box2" :style="{height: styleData.height }">
          <slot name="box2"></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  data() {
    return {};
  },
  props: ["styleData"],
  methods: {},
  components: {}
};
</script>

<style lang="scss" type="text/css" scoped>
@import "@/common/style.scss";
$main-color: rgb(0, 162, 255) !default;
.DOM {
  border-bottom: rgb(240, 240, 240) 5px solid;
  .poab {
    position: relative;
    height: 30px;
  }
  .title {
    border-bottom: $main-color 5px solid;
    letter-spacing:3px;
  }
  .box1 {
    position: absolute;
    top: 0px;
    height: 100%;
  }
  .box2 {
    position: absolute;
    right: 0px;
    top: 0px;
    height: 100%;
  }
}
</style>

